<template>
  <div class="UnionDetails">
    <el-input placeholder="请输入内容" clearable v-model="id">
      <template slot="prepend">工会编号</template>
    </el-input>
    <el-input placeholder="请输入内容" clearable v-model="phone">
      <template slot="prepend">联系方式</template>
    </el-input>
    <el-button class="btn" @click="search">搜索</el-button>
    <div class="typpe">
      <el-radio-group v-model="active" fill="#7b94d8" @change="search">
        <el-radio-button label="1">工会详情</el-radio-button>
        <el-radio-button label="2">主播列表</el-radio-button>
        <el-radio-button label="3">结算记录</el-radio-button>
      </el-radio-group>
    </div>
    <Details
      v-if="active == 1"
      :id="id"
      :phone1="phone"
      ref="Details"
    ></Details>
    <AnchorList
      v-if="active == 2"
      :id="id"
      :phone="phone"
      ref="AnchorList"
    ></AnchorList>
    <SettlementRecords
      v-if="active == 3"
      :id="id"
      :phone="phone"
      ref="SettlementRecords"
    ></SettlementRecords>
  </div>
</template>

<script>
import Details from "./components/Details";
import AnchorList from "./components/AnchorList";
import SettlementRecords from "./components/SettlementRecords";
export default {
  components: { Details, AnchorList, SettlementRecords },
  data() {
    return {
      id: "",
      phone: "",
      active: "1",
    };
  },
  methods: {
    search() {
      switch (this.active) {
        case "1":
          this.$refs.Details.getData();
          break;
        case "2":
          this.$refs.AnchorList.resetSearch();
          break;
      }
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.$nextTick(() => {
        this.search();
      });
    }
  },
};
</script>

<style lang="less" scoped>
.UnionDetails {
  padding: 20px;
  .el-input {
    width: 300px;
    margin-right: 20px;
  }
  .typpe {
    margin-top: 20px;
  }
}
</style>